<%--
  Created by IntelliJ IDEA.
  User: CY
  Date: 2018/5/16
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%  String point=(String) request.getSession().getAttribute("coordinatePoint");%>
<!DOCTYPE html>
<head>
    <title>百度地图</title>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
    <%--<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1">--%>
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YECw4heQ9wzy7RKg8OW9QLMsySKzQRan"></script>

    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <%--<script src="/js/street/TwoPointFive.js"></script>--%>
    <style>
        html{height:100%}
        body{height:100%; margin:0px;padding:0px}
        .head{height:50px}
        #map{width:100%;height:100%}
        .rightNav {
            position: absolute;
            top: 20%;
            right: 1%;
            width: 135px;
            height: 220px;
            z-index: 999;
            /*display: none;*/
        }
        .rightNav .one{
            background: url(/img/grid/btnxuanzhong.png) no-repeat;
            background-size: 100% 100%;
            -ms-behavior: url(/css/main/backgroundsize.min.htc);
            behavior: url(/css/main/backgroundsize.min.htc);
            width: 96%;
            height: 34px;
            line-height: 34px;
            margin-top: 10px;
            cursor: pointer;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
        .rightNav .one.active {
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .rightNav .one:hover{
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .qiye {
            position: absolute;
            top: 20%;
            left: 1%;
            height: 220px;
            z-index: 999;
            overflow:auto;
            width:148px;
            height: 250px;
        }
        .qiye .two{
            background: url(/img/grid/btnxuanzhong.png) no-repeat;
            background-size: 100% 100%;
            -ms-behavior: url(/css/main/backgroundsize.min.htc);
            behavior: url(/css/main/backgroundsize.min.htc);
            width: 100%;
            height: 34px;
            line-height: 34px;
            margin-top: 10px;
            cursor: pointer;
            color: #fff;
            text-align: center;
            overflow: hidden;
        }
        .qiye .two.active {
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .qiye .two:hover{
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .outer{
            width:150px;
            height:60px;
            position:absolute;
            /*background-size:100% ;*/
            z-index: 99999;
            /*background: grey;*/
        }
        .inner{
            color:#fff;
            font-size:14px;
            display: inline-block;
            width:73px;
            text-align: center;
            position: relative;
            cursor:pointer;
            /*line-height: 36px;*/
            /*padding-left:40px;*/
            /*padding-top: 4px;*/
            /*word-break: break-all;*/
            /*text-overflow: ellipsis;*/
            /*display: -webkit-box; !** 对象作为伸缩盒子模型显示 **!*/
            /*-webkit-box-orient: vertical; !** 设置或检索伸缩盒对象的子元素的排列方式 **!*/
            /*-webkit-line-clamp: 1; !** 显示的行数 **!*/
            /*overflow: hidden;  !** 隐藏超出的内容 **!*/
        }
        .headImg{
            position: absolute;
            left: -37px;
            top: 0px;
        }
        .topName{
            display: inline-block;
            width: 80px;
            line-height: 30px;
            padding-left: 30px;
            text-align: left;
        }
        .botName{
            display: inline-block;
            width: 100px;
            line-height: 22px;
            padding-left: 30px;
            text-align: left;
        }

        .clearfx{
            width:100%;
            line-height: 50px;
            font-size:14px;
            /*height: 50px;*/
        }
        /*.layui-layer{*/
            /*top:81px!important;*/
        /*}*/
        .cont{
            border-bottom: 1px dashed #eeeeee;
            width:80%;
            /*height:50px;*/
            margin:0px 20px 0px 20px;
            float:left
        }
        .left{
            /*width:30%;*/
            /*float:left;*/
            text-align: right;
            vertical-align: top;
            margin-left:3px;
        }
        .right{
            width:64%;
            /*float:left;*/
            text-align: left;
            margin-left:5%;
        }
        .backs{
            background:url('/img/menu/chuzuwu.png') no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            width:30px;
            height:30px;
        }
        .img{
            float:left;
            vertical-align: middle;
            margin-top: 15px;
            margin-left:20px;
        }
        .BMap_noprint{
            top:56px!important;
        }
        .BMap_cpyCtrl{
            display: none;
        }
        .back{
            background: url('/img/grid/shipinjiankong.png') no-repeat;
            display: inline-block;
            width:130px;
            height:40px;
            background-size: 100%;
            line-height: 40px;
        }
    </style>
    <script src="/js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <%--<script type="text/javascript" src="/js/street/Library.js"></script>--%>
</head>
<body >
<div class="headTop" style="display: none">
    <ul class="clearfix fl">
        <li class="headTopLi fl Querys active" data-type="0">网格员地图</li>
        <li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>
        <li class="headTopLi fl Querys" data-type="2">网格地图</li>
        <li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>
        <li class="headTopLi fl Querys" data-type="3">监控地图</li>
        <li class=" fl"><img style="margin-top: 3px;" src="/img/02.png" alt=""></li>
        <li class="headTopLi fl Querys" data-type="4">企业地图</li>
    </ul>
</div>
    <ul class="rightNav">
        <%--<li class="one active" data-type="0">司法行政</li>--%>
        <%--&lt;%&ndash;<li class="one" data-type="1">社区地图</li>&ndash;%&gt;--%>
        <%--<li class="one" data-type="2">律师事务所</li>--%>
        <%--<li class="one" data-type="3">公证机构</li>--%>
        <%--<li class="one" data-type="4">司法鉴定机构</li>--%>
        <%--&lt;%&ndash;<li class="one" data-type="5">环保设施地图</li>&ndash;%&gt;--%>
        <%--<li class="one" data-type="5">法律援助机构</li>--%>
        <%--<li class="one" data-type="6">社矫电子围栏</li>--%>
    </ul>
    <ul class="qiye">
        <%--<li class="two active" data-type="0">合格达标</li>--%>
        <%--<li class="two" data-type="1">一般隐患</li>--%>
        <%--<li class="two" data-type="2">突出隐患</li>--%>
        <%--<li class="two" data-type="3">重大隐患</li>--%>
    </ul>
    <div id="map"></div>
<script>
    var map = new BMap.Map("map");
  //var point = new BMap.Point(118.019131,34.341107);
    var point = new BMap.Point(<%=point%>); //创建点坐标
    var map = new BMap.Map("map", {mapType:  BMAP_ANCHOR_TOP_LEFT, minZoom: 1, maxZoom: 18});
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    //设置地图类型及最小最大级别
//    var marker = new BMap.Marker(point); //将点转化成标注点
//    map.addOverlay(marker);  //将标注点添加到地图上
    //设置地图级别（1-18）
    map.centerAndZoom(point, 15);
    //开启滚轮缩放地图
    map.enableScrollWheelZoom();
//    绘制自定义覆盖物
//    1\定义构造函数
    function ComplexCustomOverlay(point,img,name,id,con,grid,type,title){
        this._point = point;
        this._img = img;
        this._name = name;
        this._id = id;
        this._con = con;
        this._grid = grid;
        this._type = type;
        this._title = title;
    }
    // 继承API的BMap.Overlay
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    //2、初始化自定义覆盖物实现初始化方法
    ComplexCustomOverlay.prototype.initialize = function(map){
        // 保存map对象实例
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器
        var div = this._div = document.createElement("div");
        div.style.backgroundImage = 'url('+this._img+')'
        div.setAttribute('class','outer');
        div.setAttribute('name',this._name);
        div.setAttribute('id',this._id);
        div.setAttribute('content',this._con);
        div.setAttribute('grid',this._grid);
        div.setAttribute('type',this._type);
        div.setAttribute('title',this._title);
        div.innerHTML= '<div class="inner">'+this._con+'</div>'
        // 将div添加到覆盖物容器中
        map.getPanes().labelPane.appendChild(div);
        //getPanes(),返回值:MapPane,返回地图覆盖物容器列表  labelPane呢???
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return div;
    }
    //3、绘制覆盖物
    // 实现绘制方法
    ComplexCustomOverlay.prototype.draw = function(){
        var _map = this._map;
//      var marker = new BMap.Marker(_map);
//      map.overlayPixelToPoint(this._point);
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - 50 + "px";
        this._div.style.top  = pixel.y - 20 + "px";
    }
    var type = $.GetRequest().type;
//  console.log(type)
    if(type == 'wg'){
        $('.headTop').show();
        $('.rightNav').hide();
    }else{
        $('.headTop').hide();
        $('.rightNav').show();
    }
    $(document).on('click','.pic',function(){
        var src = $(this).attr('src');
        window.open(src)
    })
    $('.headTop .headTopLi').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        $('.qiye').hide();
        if($(this).attr('data-type')==0){
            map.clearOverlays();
            maps.gridMap();
        }else if($(this).attr('data-type')==1){
            map.clearOverlays();
            maps.CommunityMap();
        }else if($(this).attr('data-type')==2){
            map.clearOverlays();
            maps.CommunityMap(maps.theGridMap);
        }else if($(this).attr('data-type')==3){
            map.clearOverlays();
            maps.monitorMap();
        }else if($(this).attr('data-type')==4){
            $('.qiye').show();
            map.clearOverlays();
            maps.enterpriseMap('01')
        }else if($(this).attr('data-type')==5){
            map.clearOverlays();
            maps.environmental()
        }
    })
    $('.qiye .two').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        if($(this).attr('data-type')==0){
            map.clearOverlays();
            maps.enterpriseMap('01')
        }else if($(this).attr('data-type')==1){
            map.clearOverlays();
            maps.enterpriseMap('02')
        }else if($(this).attr('data-type')==2){
            map.clearOverlays();
            maps.enterpriseMap('03')
        }else if($(this).attr('data-type')==3){
            map.clearOverlays();
            maps.enterpriseMap('04')
        }
    })
    function check(name){
        if(name == undefined){
            return ''
        }else{
            return name;
        }
    }
    $(document).on('click','.outer',function(){
        var type=$(this).attr('type');
        var id = $(this).attr('id');
        var name = $(this).attr('name');
            if(type == 0){
                $.get('/orgAtlas/queryAtlasById',{atlasId:id},function(res){
                    var data= res.data;
                    //坐标点的窗口
                    layer.open({
                        type:1,
                        title: ['司法行政', 'background-color:#2b7fe0;color:#fff;'],
                        area: ['350px', '320px'],
                        btn: 0,
                        content:'<ul>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">机构名称:</span><span class="right">'+data.orgName +'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">负责人:</span><span class="right">'+data.principal+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newlocation.png" alt="" class="img"><div class="cont"><span class="left">联系电话:</span><span class="right">'+data.contactPhone+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newjgy.png" alt="" class="img"><div class="cont"><span class="left">机构具体地址:</span><span class="right">'+data.orgAddress+'</span></div></li>' +
                        '</ul>'
                    })
                })
            }
            else if(type == 1){
                $.get('/orgAtlas/queryAtlasById',{atlasId:id},function(res){
                    var data= res.data;
                    layer.open({
                        type:1,
                        title: ['司法行政', 'background-color:#2b7fe0;color:#fff;'],
                        area: ['350px', '320px'],
                        btn: 0,
                        content:'<ul>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">机构名称:</span><span class="right">'+data.orgName +'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">负责人:</span><span class="right">'+data.principal+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newlocation.png" alt="" class="img"><div class="cont"><span class="left">联系电话:</span><span class="right">'+data.contactPhone+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newjgy.png" alt="" class="img"><div class="cont"><span class="left">机构具体地址:</span><span class="right">'+data.orgAddress+'</span></div></li>' +
                        '</ul>'
                    })
                })
            }else if(type == 2){
                $.get('/orgAtlas/queryAtlasById',{atlasId:id},function(res){
                    var data= res.data;
                    layer.open({
                        type:1,
                        title: ['公证机构', 'background-color:#2b7fe0;color:#fff;'],
                        area: ['350px', '400px'],
                        content:'<ul>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">机构名称:</span><span class="right">'+data.orgName +'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">负责人:</span><span class="right">'+data.principal+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newlocation.png" alt="" class="img"><div class="cont"><span class="left">联系电话:</span><span class="right">'+data.contactPhone+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newjgy.png" alt="" class="img"><div class="cont"><span class="left">机构具体地址:</span><span class="right">'+data.orgAddress+'</span></div></li>' +
                        '</ul>'
                    })
                })
            }else if(type == 3){
                $.get('/orgAtlas/queryAtlasById',{atlasId:id},function(res){
                    var data= res.data;
                    layer.open({
                        type:1,
                        title: ['司法鉴定机构', 'background-color:#2b7fe0;color:#fff;'],
                        area: ['350px', '400px'],
                        content:'<ul>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">机构名称:</span><span class="right">'+data.orgName +'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">负责人:</span><span class="right">'+data.principal+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newlocation.png" alt="" class="img"><div class="cont"><span class="left">联系电话:</span><span class="right">'+data.contactPhone+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newjgy.png" alt="" class="img"><div class="cont"><span class="left">机构具体地址:</span><span class="right">'+data.orgAddress+'</span></div></li>' +
                        '</ul>'
                    })
                })
            }else if(type == 4){
                $.get('/orgAtlas/queryAtlasById',{atlasId:id},function(res){
                    var data= res.data;
                    layer.open({
                        type:1,
                        title: ['法律援助机构', 'background-color:#2b7fe0;color:#fff;'],
                        area: ['350px', '400px'],
                        content:'<ul>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">机构名称:</span><span class="right">'+data.orgName +'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">负责人:</span><span class="right">'+data.principal+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newlocation.png" alt="" class="img"><div class="cont"><span class="left">联系电话:</span><span class="right">'+data.contactPhone+'</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newjgy.png" alt="" class="img"><div class="cont"><span class="left">机构具体地址:</span><span class="right">'+data.orgAddress+'</span></div></li>' +
                        '</ul>'
                    })
                })
            }else{
                $.get('/orgAtlas/queryAtlasById', {atlasId: id}, function (res) {
                    var data = res.data;
                    layer.open({
                        type: 1,
                        title: ['机构具体信息', 'background-color:#2b7fe0;color:#fff;'],
                        area: ['350px', '320px'],
                        btn: 0,
                        content: '<ul>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">机构名称:</span><span class="right">' + data.orgName + '</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">负责人:</span><span class="right">' + data.principal + '</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newlocation.png" alt="" class="img"><div class="cont"><span class="left">联系电话:</span><span class="right">' + data.contactPhone + '</span></div></li>' +
                        '<li class="clearfx"><img src="../../img/newjgy.png" alt="" class="img"><div class="cont"><span class="left">机构具体地址:</span><span class="right">' + data.orgAddress + '</span></div></li>' +
                        '</ul>'
                    })
                })
            }
    })
    //图片显示
    function cltp(attUrl){
       if(attUrl == undefined){
       }
    }
    //点击左侧tab时 显示坐标ip 相应的坐标点
    function theLocation(a) {
//      点击当前tab 时为选中状态
        a.addClass('active').siblings().removeClass('active');
        var ip=a.attr('mapCoordinates');
        var orgName=a.attr('orgName');
        var orgId=a.attr('orgId');
//      清空坐标点
        map.clearOverlays();
        var marker = new BMap.Marker(new BMap.Point(ip.split(',')[0],ip.split(',')[1])) ;  // 创建标注
//        map.addOverlay(marker);              // 将标注添加到地图中
//      百度地图添加坐标点验证
        map.panTo(new BMap.Point(ip))
        var point = new BMap.Point(ip.split(',')[0], ip.split(',')[1]);
//      初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 12);
        var Icon = '';
        var con = ' <span  title="'+orgName+'" class="imgs"><img src="/img/grid/farenyanzhong1.png" alt=""></span>'
//      ComplexCustomOverlay():定义自己的覆盖物实体 point,img,name,id,con,grid,type,title
        var myCompOverlay = new ComplexCustomOverlay(point,Icon,orgName,orgId ,con,'',type,orgName );
        map.addOverlay(myCompOverlay);//将标注添加到地图中
    }
//  ajax 根据codeId循环显示左侧相对tab的数据
    function navOneClick(e){
        var type = e.attr('type')
//      点击当前tab时 为选中状态
        e.addClass('active').siblings().removeClass('active');
//      清空地标点
        map.clearOverlays();
        var codeId = e.attr('codeId');
        $.ajax({
            url:'/orgAtlas/queryOrgAtlas?codeId='+codeId,
            dataType:'json',
            success:function (json) {
                if(json.flag){
                    var content='';
                    var str='';
                    var str2="没有数据";
                    if(json.msg==str2){
                        alert("该类型没有数据");
                        $('.qiye').html("");
                    }else{
                        for(var j=0;j<json.data.length;j++){
                            var title = json.data[j].orgName;
//                          判断orgName 的长度是否大于9
                            if(json.data[j].orgName.length>=9){
//                          截取第9位，后面加'...'
                               json.data[j].orgName =json.data[j].orgName.substring(0,9)+"...";
                           }
//                         如果不大于9，就显示全部字
                           str += '<li class="two"  type="'+j+'"  orgId="' + json.data[j].orgId + '"  orgName="' + json.data[j].orgName + '" mapCoordinates="' + json.data[j].mapCoordinates + '" onclick="theLocation($(this))" title="' + title + '">' + json.data[j].orgName + '</li>';
                        }
                        $('.qiye').html(str);
//                      显示当前类型的所有坐标
                        for (var j = 0; j< json.data.length; j++) {
                            var ip=json.data[j].mapCoordinates;
                            // 创建标注
                            var marker = new BMap.Marker(new BMap.Point(ip.split(',')[0], ip.split(',')[1]));
//                          创建地标点窗口
                            var point = new BMap.Point(ip.split(',')[0], ip.split(',')[1]);
                            var Icon = '';
//                          地标点自定义图片
                            var con = ' <span  title="'+json.data[j].orgName+'" class="imgs"><img src="/img/grid/farenyanzhong1.png" alt=""></span>'
                            // point,img,name,id,con,grid,type,title
                            var myCompOverlay = new ComplexCustomOverlay(point,Icon,json.data[j].orgName,json.data[j].orgId ,con,'',type,json.data[j].orgName );
                            //将标注添加到地图中
                            map.addOverlay(myCompOverlay);
                        }
                    }
                }
            },
            error:function(json){
                alert('数据异常，请联系管理员！');
            }
        })
    }
//  ajax 循环显示右侧大tab数据
    function rightTabFunc(){
        $.ajax({
            url:"/code/getCode",
            data:{
                parentNo:'institutions_type'
            },
            type:'post',
            dataType:'json',
            success:function (json) {
                if(json.flag){
                    var str = '';
                    for(var i=0;i<json.obj.length;i++) {
                        str += '<li class="one" type="'+i+'"  codeId="' + json.obj[i].codeId + '" onclick="navOneClick($(this))">' + json.obj[i].codeName + '</li>';
                    }
                    $('.rightNav').html(str);
                }else {
                    alert('暂无！')
                }
            },
            error:function(json){
                alert('数据异常，请联系管理员！');
            }
        })
    };
    $(function(){
        rightTabFunc();
    })
</script>
</body>
</html>
